<template>
  <div class="rblock-root">
    <div class="wrapper innerscr">
      <div v-for="item in data.data" class="listItem">
        <router-link to="detail" tag="div"
          class="title" :class="{hot: item.hot}">
          {{item.title}}
        </router-link>
        <div class="cline">
          <div class="content">{{item.content}}</div>
          <div class="date">{{item.date}}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default{
  name: 'rblock',
  props: ['data']
}
</script>

<style scoped lang="stylus">
.rblock-root
  box-sizing border-box
  padding 40px 12px 0 24px
.wrapper
  height 530px
  overflow auto
.listItem
  height 80px
  >.title
    font-size 16px
    color #59b3ff
    margin-bottom 6px
    cursor pointer
    &.hot
      color #c10809
  >.cline
    display flex
    justify-content space-between
    white-space nowrap
    font-size 12px
    >.content
      overflow hidden
      text-overflow ellipsis
      width 365px
    >.date
      font-family consolas
      color #8dccfd
      letter-spacing 1px
      padding-right 24px

</style>